import React, { useEffect, useState } from 'react';
import styles from './index.module.scss';
// import test from '../../../assets/result-page-img/study-style/style-watch-sm.png';
import StyleFeature from './style-feature';
import StudyStyleTitle from '../study-style-title';
import results from '../../../results';

const StudyStyleHead = ({ type, size, isShow, data, percent }) => {

  const [imgType, setImgType] = useState();
  useEffect(() => {
    if (size === 'small') {
      setImgType(data + '_sm');
    } else {
      setImgType(data);
    }
  }, []);
  return (
    <div className={styles.studyStyleHead}>
      <StudyStyleTitle type={imgType} size={size} isShow={isShow}>
        {percent}
      </StudyStyleTitle>
      <div className={styles.feature}>
        {results[data].feature.map((item) => {
          return (
            <StyleFeature type={type} key={item}>
              {item}
            </StyleFeature>
          );
        })}
      </div>
    </div>
  );
};

export default StudyStyleHead;
